<!-- 协议数据 -->
<template>
  <div class="the-list">
    <div class="panel-table">
      <div class="table-head">
        <span>协议列表</span>
        <div>
          <el-button type="primary" @click="tableFn.openEditPanel"
            >添加</el-button
          >
        </div>
      </div>
      <el-table
        :data="table.list"
        stripe
        :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
        style="width: 100%"
        border
      >
        <el-table-column prop="title" label="协议标题" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ tableFn.getItemFromArray(table.statusList, row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedUser" label="最后操作人" />
        <el-table-column prop="createdAt" label="添加时间" />
        <el-table-column prop="updatedAt" label="最后修改时间" />
        <el-table-column
          fixed="right"
          label="操作"
          width="180px"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              size="small"
              type="primary"
              plain
              @click="tableFn.openEditPanel(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <pagination
          :total="table.total"
          v-model:page="table.query.page"
          v-model:limit="table.query.pageSize"
          @pagination="tableFn.getTableList"
        />
      </div>
    </div>

    <el-dialog
      v-model="table.operate.show"
      width="50%"
      :close-on-click-modal="false"
    >
      <template #title>
        <div style="text-align: left">
          协议{{ !!table.operate.post.id ? "编辑" : "新增" }}
        </div>
      </template>
      <div class="detail-body">
        <el-form
          ref="formRef"
          :rules="formRules"
          :model="table.operate.post"
          class="demo-form-inline"
          label-width="140px"
        >
          <el-row>
            <el-form-item prop="status" label="启用状态">
              <el-switch
                v-model="table.operate.post.status"
                :active-value="'1'"
                :inactive-value="'0'"
              ></el-switch>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="title" label="协议标题">
              <el-input
                v-model="table.operate.post.title"
                style="max-width: 420px"
                placeholder="协议标题"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="协议详情" prop="content">
              <tinymce
                ref="content"
                v-model:value="table.operate.post.content"
                style="width: 100%"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tableFn.closeEditPanel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="tableFn.submitAgreement"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { reactive, watch, getCurrentInstance } from "vue";
import {
  getAgreementInfoList,
  addAgreementInfo,
  editAgreementInfo,
} from "@/api/eventsinfo.js";
import Pagination from "@/components/Pagination";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { eventsList, getItemFromArray, isLongTime } from "@/utils/tool";

export default {
  name: "agreementInfo",
  components: {},
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: table, $fn: tableFn } = tableModule();
    return {
      table,
      tableFn,
    };
  },
};

function tableModule() {
  const router = useRouter();
  const params = router.currentRoute.value.params;
  const backup = {
    query: {
      perName: "",
      perPhone: "",
      pageSize: 10,
      page: 1,
    },
  };

  const { proxy, ctx } = getCurrentInstance();
  const $data = reactive({
    query: {
      pageSize: 10,
      page: 1,
      perName: "",
      perPhone: "",
    },
    total: 0,
    list: [],
    operate: {
      show: false,
      post: {
        id: "",
        title: "",
        status: "0",
        content: "",
        type: "0",
      },
    },
    statusList: [
      { key: '0', name: "下架" },
      { key: '1', name: "上架" },
    ],
  });
  const $fn = {
    openEditPanel(row) {
      $data.operate.show = true;
      $data.operate.post.id = row.id;
      $data.operate.post.title = row.title || "";
      $data.operate.post.status = row.status || "0";
      ctx.$refs.content.setContent(row.content || "");
    },
    closeEditPanel() {
      $data.operate.show = false;
      ctx.$refs.content.setContent("");
      $data.operate.post = {
        id: "",
        title: "",
        status: "0",
        content: "",
        type: "0",
      };
    },
    submitAgreement() {
      if (!$data.operate.post.title) {
        ElMessage.warning("请输入标题！");
        return;
      }
      $data.operate.post.relevanceId = params.id;
      //修改协议
      if (!!$data.operate.post.id) {
        editAgreementInfo($data.operate.post).then((res) => {
          if (res.code === 0) {
            ElMessage.success("修改成功！");
            $fn.closeEditPanel();
            $fn.getTableList();
          }
        });
      } else {
        //新增协议
        addAgreementInfo($data.operate.post).then((res) => {
          if (res.code === 0) {
            ElMessage.success("添加成功！");
            $fn.closeEditPanel();
            $fn.getTableList();
          }
        });
      }
    },
    onSubmit() {
      $fn.getTableList();
    },
    getTableList() {
      $data.query.relevanceId = params.id;
      getAgreementInfoList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items || [];
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableList();
    },
    getItemFromArray(itemList, item){
      return getItemFromArray(itemList, item);
    }
  };
  $fn.getTableList();
  return {
    $data,
    $fn,
  };
}
</script>
<style scoped lang="scss">
@import "@/styles/tablePage.scss";
// .the-list {
//   height: 100%;
// }
.el-form-item {
  margin-bottom: 8px;
}
</style>
<style scoped>
/deep/.mce-panel {
  width: 34vw !important;
}
/deep/.mce-flow-layout-item.mce-last {
  overflow: auto;
  width: 100%;
}
</style>
